<template>
    <div>
        <div>交易明细</div>
        <div style="height: 500px;">
            <el-auto-resizer>
                <template #default="{ height, width }">
                    <el-table-v2 :columns="columns" :data="data" :width="width" :height="height" fixed />
                </template>
            </el-auto-resizer>
        </div>
    </div>
</template>
<script setup lang="ts">
import { gettradeinfo } from '../../../api/membersettingApi'
let getdata = async () => {
    let get = await gettradeinfo({
        phone:7777777
    })
    console.log(get);

}
getdata()
const tabletitle = ['交易时间', '订单编号', '消费金额', '抵扣金额', '优惠金额', '实收款']

const generateColumns = (length = 10, prefix = 'column-', props?: any) =>
    Array.from({ length }).map((_, columnIndex) => ({
        ...props,
        key: `${prefix}${columnIndex}`,
        dataKey: `${prefix}${columnIndex}`,
        title: `${tabletitle[columnIndex]}`,
        width: 90,
    }))

const generateData = (
    columns: ReturnType<typeof generateColumns>,
    length = 200,
    prefix = 'row-'
) =>
    Array.from({ length }).map((_, rowIndex) => {
        return columns.reduce(
            (rowData, column, columnIndex) => {
                rowData[column.dataKey] = `Row ${rowIndex} - Col ${columnIndex}`
                return rowData
            },
            {
                id: `${prefix}${rowIndex}`,
                parentId: null,
            }
        )
    })

const columns = generateColumns(6)
const data = generateData(columns, 200)
</script>
<style></style>